<template>
  <el-drawer :title="!dataForm.id ? '新建' : '账单收款'" :visible.sync="visible"
             :wrapperClosable="false" size="1000px" append-to-body
             class="JNPF-common-drawer"
  >

    <div class="JNPF-flex-main">
      <div class="dynamicForm ">
        <el-form ref="elForm" :model="dataForm" :rules="rules" size="small" label-width="100px" label-position="right">
          <template v-if="!loading">
            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                           :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":15,"line-height":32,"font-style":"normal","text-align":"left"}'
                           value="基础信息" :closable="false"
                >
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-row :gutter="15">
                <el-col :span="12">
                  <el-form-item label="支付方式"
                                prop="paymentType"
                  >
                    <el-select v-model="dataForm.paymentType"
                               placeholder="请选择" clearable :style='{"width":"100%"}'
                    >
                      <el-option v-for="(item, index) in paymentTypeOptions" :key="index" :label="item.fullName"
                                 :value="item.id" :disabled="item.disabled"
                      ></el-option>

                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="计费周期"
                                prop="expenseCycleDate"
                  >
                    <p>{{dataForm.expenseCycleDate}}</p>

                  </el-form-item>
                </el-col>



                <el-col :span="12">
                  <el-form-item label="减免日期"
                                prop="receiptAccount"
                  >
                    <el-date-picker v-model="uploadForm.reduceDate"
                                    placeholder="请选择" clearable :style='{"width":"100%"}' type="date"
                                    format="yyyy-MM-dd" value-format="timestamp"
                    >

                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="减免原因"
                                prop="paymentBy"
                  >
                    <el-input v-model="uploadForm.reason"
                              placeholder="请输入" clearable :style='{"width":"100%"}'
                    >

                    </el-input>
                  </el-form-item>
                </el-col>

              </el-row>
            </el-col>
            <el-col :span="8">
              <el-form-item label="附件"
                            prop="file"
              >
                <JNPF-UploadFz v-model="uploadForm.file"
                               :fileSize="10" sizeUnit="MB" :limit="9" buttonText="点击上传"
                >

                </JNPF-UploadFz>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label-width="0">
                <JNPF-Text :style='{"width":"100%"}'
                           :textStyle='{"color":"#000000","font-weight":"bold","text-decoration":"none","font-size":15,"line-height":32,"font-style":"normal","text-align":"left"}'
                           value="收款明细" :closable="false"
                >
                </JNPF-Text>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label-width="100" style="margin-left: 21px">
                <!--                <div class="JNPF-common-title">-->
                <!--                  <h2 style="font-weight: 600">费用项目明细</h2>-->
                <!--                </div>-->
                <el-table      has-c @selection-change="handleSelectionChange"     :data="dataForm.zcbillitemList" size="mini">
                  <el-table-column
                    type="selection"
                    width="55">
                  </el-table-column>
                  <el-table-column type="index" width="50" label="序号" align="center"/>
                  <el-table-column  width="150" label="状态" align="status">
                    <template slot-scope="scope">
                      <p v-if="scope.row.status">待收款</p>
                    </template>
                  </el-table-column>


                  <el-table-column  width="150" prop="expenseItem" label="费用项">
                    <template slot-scope="scope">
                      <!--                      <el-input disabled v-model="scope.row.expenseItem"-->
                      <!--                                placeholder="请输入" rea1donly clearable :style='{"width":"100%"}'-->
                      <!--                      >-->
                      <!--                      </el-input>-->
                      <!--                      -->
                      <p>{{scope.row.expenseItem}}</p>

                    </template>
                  </el-table-column>

                  <el-table-column prop="expenseItem"  width="150" label="周期单价">
                    <template slot-scope="scope">

                      <P>{{scope.row.cyclePrice}}({{scope.row.cycleType}})</P>
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"   width="100" label="应收">
                    <template slot-scope="scope">

                      <P>{{scope.row.receiveAmount}}</P>
                    </template>
                  </el-table-column>
                  <el-table-column prop="expenseItem"   width="100" label="待收">
                    <template slot-scope="scope">

                      <P>{{scope.row.pendAmount}}</P>
                    </template>
                  </el-table-column>

                  <el-table-column prop="expenseItem"   width="200" label="本次减免金额">
                    <template slot-scope="scope">
                      <el-input v-model="scope.row.reduceAmount"
                                placeholder="请输入本次减免金额" clearable :style='{"width":"100%"}'
                      >

                      </el-input>
                    </template>
                  </el-table-column>


                </el-table>

                <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                              ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
                />
              </el-form-item>
            </el-col>
          </template>
        </el-form>
        <SelectDialog v-if="selectDialogVisible" :config="currTableConf" :formData="dataForm"
                      ref="selectDialog" @select="addForSelect" @close="selectDialogVisible=false"
        />
      </div>
      <div class="drawer-footer">
        <el-button @click="visible = false"> 取 消</el-button>
        <el-button type="primary" @click="dataFormSubmit()" :loading="btnLoading"> 确 定</el-button>
      </div>
    </div>
  </el-drawer>
</template>
<script>
import request from '@/utils/request'
import { getDataInterfaceRes } from '@/api/systemData/dataInterface'
import { getDictionaryDataSelector } from '@/api/systemData/dictionary'

export default {
  components: {},
  props: [],
  data() {
    return {
      uploadForm:{},
      visible: false,
      loading: false,
      btnLoading: false,
      selectDialogVisible: false,
      currTableConf: {},
      addTableConf: {
        zcbillitemList: {
          'popupType': 'dialog',
          'hasPage': true,
          'popupTitle': '选择数据',
          'pageSize': 20,
          'columnOptions': [],
          'interfaceId': '',
          'interfaceName': '',
          'relationOptions': [],
          'templateJson': [],
          'popupWidth': '800px'
        }
      },
      tableRows: {
        zcbillitemList: {
          status: '',
          pendAmount: '',
          realAmount: '',
          ticket: '',
          enabledmark: undefined
        }
      },
      currVmodel: '',
      dataForm: {
        paymentType: '',
        paymentBillNo: '',
        receiptAccount: '',
        paymentBy: '',
        paymentAccount: '',
        receiptDate: '',
        paymentCertificateFile: [],
        zcbillitemList: []
      },
      rules:
        {},
      paymentTypeOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      receiptAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentByOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],
      paymentAccountOptions: [{ 'fullName': '选项一', 'id': '1' }, { 'fullName': '选项二', 'id': '2' }],

      zcglcwbillitemexpenseItemOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.getzcglcwbillitemexpenseItemOptions()
  },
  mounted() {
  },
  methods: {
    zcglcwbillitemExist() {
      let isOk = true
      for (let i = 0; i < this.dataForm.zcbillitemList.length; i++) {
        const e = this.dataForm.zcbillitemList[i]
      }
      return isOk
    },

    clearData() {
      this.dataForm.paymentType = ''
      this.dataForm.paymentBillNo = ''
      this.dataForm.receiptAccount = ''
      this.dataForm.paymentBy = ''
      this.dataForm.paymentAccount = ''
      this.dataForm.receiptDate = ''
      this.dataForm.paymentCertificateFile = []
      this.dataForm.zcbillitemList = []
    },
    init(id) {
      this.dataForm.id = id || 0
      this.visible = true
      this.$nextTick(() => {
        this.$refs['elForm'].resetFields()
        if (this.dataForm.id) {
          this.loading = true
          request({
            url: '/api/zcgl/fico/bill/getBillInfo/' + this.dataForm.id,
            method: 'get'
          }).then(res => {
            this.dataInfo(res.data)
            this.loading = false
          })
        } else {
          this.clearData()
        }
      })
      this.$store.commit('generator/UPDATE_RELATION_DATA', {})
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs['elForm'].validate((valid) => {
        if (valid) {
          if (!this.zcglcwbillitemExist()) return
          this.request()
        }
      })
    },
    request() {
      this.btnLoading = true
      let _data = this.dataList()



      this.uploadForm.reduceItem = this.dataForm.zcbillitemList
      this.uploadForm.billId = this.dataForm.id

      for (let i = 0; i <  this.uploadForm.reduceItem.length; i++) {

        this.uploadForm.reduceItem[i].billItemId =  this.uploadForm.reduceItem[i].id
      }


      if (!this.dataForm.id) {

      } else {
        request({
          url: '/api/zcgl/fico/bill/reduce',
          method: 'POST',
          data: this.uploadForm
        }).then((res) => {
          this.$message({
            message: res.msg,
            type: 'success',
            duration: 1000,
            onClose: () => {
              this.visible = false
              this.btnLoading = false
              this.$emit('refresh', true)
            }
          })
        }).catch(() => {
          this.btnLoading = false
        })
      }
    },
    addzcbillitemList() {
      let item = {
        expenseItem: '',
        status: undefined,
        pendAmount: undefined,
        realAmount: undefined,
        ticket: undefined
      }
      this.dataForm.zcbillitemList.push(item)
    },
    delzcbillitemList(index) {
      this.dataForm.zcbillitemList.splice(index, 1)
    },
    openSelectDialog(key) {
      this.currTableConf = this.addTableConf[key]
      this.currVmodel = key
      this.selectDialogVisible = true
      this.$nextTick(() => {
        this.$refs.selectDialog.init()
      })
    },
    addForSelect(data) {
      for (let i = 0; i < data.length; i++) {
        let item = { ...this.tableRows[this.currVmodel], ...data[i] }
        this.dataForm[this.currVmodel].push(item)
      }
    },
    // dataList() {
    //   var _data = JSON.parse(JSON.stringify(this.dataForm))
    //   _data.paymentCertificateFile = Array.isArray(_data.paymentCertificateFile) ? JSON.stringify(_data.paymentCertificateFile) : '[]'
    //   for (let i = 0; i < _data.zcbillitemList.length; i++) {
    //     var _list = _data.zcbillitemList[i]
    //   }
    //   return _data
    // },
    dataList() {
      var _data = JSON.parse(JSON.stringify(this.dataForm));
      if(_data.paymentCertificateFile!=null  && _data.paymentCertificateFile!=''){
        _data.paymentCertificateFile = JSON.stringify(_data.paymentCertificateFile)

      }
      for (let i = 0; i < _data.zcbillitemList.length; i++) {
        var _list = _data.zcbillitemList[i];
      }

      return _data;
    },
    dataInfo(dataAll) {
      let _dataAll = dataAll
      if(_dataAll.paymentCertificateFile!=null && dataAll.paymentCertificateFile!=''){
        _dataAll.paymentCertificateFile = JSON.parse(_dataAll.paymentCertificateFile)

      }else{
        _dataAll.paymentCertificateFile= ''
      }
      for (let i = 0; i < _dataAll.zcbillitemList.length; i++) {
        var _list = _dataAll.zcbillitemList[i];
      }
      this.dataForm = _dataAll
    },
    // dataInfo(dataAll) {
    //   let _dataAll = dataAll
    //   _dataAll.paymentCertificateFile = _dataAll.paymentCertificateFile ? JSON.parse(_dataAll.paymentCertificateFile) : []
    //   for (let i = 0; i < _dataAll.zcbillitemList.length; i++) {
    //     var _list = _dataAll.zcbillitemList[i]
    //   }
    //   this.dataForm = _dataAll
    // }
  }
}

</script>
